import React, { Component } from 'react'
import { connect } from 'react-redux'
import Header from '../../components/header/Header'
import {getlist,actions} from '../../store/modules/detail'
import { bindActionCreators } from 'redux'
import './detail.css'
class Detail extends Component {
    // componentDidMount(){
    //     let {detail:{reqlist},history} =this.props
    //     let search = new URLSearchParams(this.props.location.search)
    //     let id = search.get('id')
    //     reqlist(id,history)
    // }
    render() {
        let {list ,detail:{reqshop},history} =this.props
        // console.log(list[0]);
        return (
            <div>
                <Header title={list[0].goodsname.slice(1,7)}></Header>
                <div className='header'>
                    <ul>
                        <li>商品</li>
                        <li>评价</li>
                        <li>详情</li>
                        <li>推荐</li>
                    </ul>
                </div>
                <div className="content">
                    <div className="slideshow">
                        <img src={list[0].img} alt="" />
                        <span className="share"><i className="iconfont icon-fenxiang"></i></span>
                        <span className="number">8/8</span>
                    </div>
                    <div className="text">
                       <div className='text1'>
                        <b>&yen;</b>
                        <strong>{list[0].price}</strong>
                        <s>&yen;{list[0].market_price}</s>
                        <em>收藏</em>
                       </div>
                        <p>{list[0].goodsname}</p>
                        <span>11.11限时299元起</span>
                        <span>{list[0].description}<em className="ck">查看</em></span>
                    </div>
                    <div className="ticket">
                        <ul className="ul-left">
                            {/* <li>领券</li> */}
                            <li>分期</li>
                        </ul>
                        <ul className="ul-right">
                            <li>
                                <em>可选3/6/12期</em>
                                <i className="iconfont icon-arrow-right"></i>
                            </li>

                        </ul>

                    </div>
                </div>

                <div className="de">
                    <div className="zuoh clearfix">
                        <div className="mmm fl">
                            <i>
                            <i className='iconfont icon-wode'></i>
                                <p>客服</p>
                            </i>
                            <i>
                            <i className='iconfont icon-shangdian'></i>
                                <p>店铺</p>
                            </i>
                            <i>
                            <i className='iconfont icon-Shapecopy'></i>
                                <p>购物车</p>
                            </i>
                        </div>
                        <div className="hhh fr">
                            <div className="fl" onClick={()=>reqshop(list[0].id,history)}><p>加入购物车</p>
                            </div>
                            <div className="fr"><p>立即购买</p></div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}


let mapStateToProps = state => ({
    list:getlist(state)
})
let mapDispatchToProps = dispatch => ({
   detail:bindActionCreators(actions,dispatch)
})
export default connect(mapStateToProps,mapDispatchToProps)(Detail)
